<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子的定位</title>
  <style>
    div{
      width: 500px;
      height: 100px;
      background-color: orange;
      border:1px solid blue;
      text-align: center;
      line-height: 100px;
    }
    /*1. 固定定位盒子：以浏览器边框为定位参照物*/
    .d1{
      position: fixed;
      left:0px;       /*距离浏览器左边框0px*/
      top:100px;      /*距离浏览器上边框100px*/
    }
    /*2. 相对定位盒子：以盒子本身应该出现的位置为参照物*/
    .d2{
      background-color: pink;
      position: relative;
      left: 10px;     /*相对于它自己向右移动了10px*/
      top: 20px;      /*相对于它自己向下移动了20px*/
    }
    /*3. 绝对定位：以离子盒子最后的哪个父盒子作为参照物，这个父盒子必须设置了定位(fixed relative absolute)*/
    .d3{
      background-color: lightyellow;
      width: 500px;
      height: 200px;
      border: 1px solid blue;
      position: relative;
    }
    .d31{
      background-color: lightpink;
      width: 200px;
      height: 50px;
      line-height: 50px;
      border: solid red 1px ;
      position: absolute;
      left: 20px;
      top: 30px;
    }
  </style>
</head>
<body>
  <h1>1. 盒子的定位-固定定位（ 浏览器边框为定位参照物 ）<hr></h1>
  <div class="d1">
    固定定位
  </div>
  <br><br><br><br>
  <h1>2. 盒子的定位-相对定位（ 以盒子本身应该出现的位置为定位参照物 ）<hr></h1>
  <div class="d2">
    相对定位
  </div>
  <h1>3. 盒子的定位-绝对定位（ 以离盒子最近并设置了position属性的哪个父盒子 ）<hr></h1>
  <div class="d3">
    <div class="d31">
      绝对定位(子绝父相)
    </div>
  </div>
</body>
</html>
